<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <th:block th:include="include :: header('位移图谱')" />
    <th:block th:include="include :: layout-latest-css" />
<!--    <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.0.15/dist/g2.min.js"></script>-->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>

<style>
    .box-title {
        font-size: 16px;
        float: left;
        margin: 6px;
    }
    .left-1 {
        width: 180px;
        height: 100%;
        background-color: #fff;
        overflow: auto;
    }
    .right-2 {
        position: absolute;
        top: 0;
        left: 180px;
        right: 0;
        height: 100%;
        display: flex;
        padding: 2%;
        min-height: 600px;
        min-width: 800px;
        overflow: auto;
    }
    .batter-container {
        display: flex;
        justify-content: center;
        width:100%;
        height:calc(32% - 2px);
        margin-top: 2px;
        background-color: #fff
    }
    .battery {
        position: relative;
        display: inline-block;
        height: 60%;
        top: 20%;
        left: 0;
        width: 90%;
        padding: 2px;
        background: rgb(17,206,115);
        border: 3px solid transparent;
        border-radius: 5px;
    }
    .battery span {
        position: absolute;
        z-index: 99;
    }
    .battery:before {
        content: "";
        position: absolute;
        background-color: #fff;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 5px;
    }
    .battery:after {
        content: "";
        position: absolute;
        top: 20%;
        right: -13%;
        height: 60%;
        width: 10%;
        border-radius: 0 4px 4px 0;
        background-color: rgb(17,206,115);
    }
    .power {
        display: block;
        position: absolute;
        top: 2px;
        left: 2px;
        bottom: 2px;
        right: 2px;
        border-radius: 1px;
        transform: scaleX(1);
        transform-origin: 0 0;
        background: rgba(7, 245, 126, 0.88);
        transition: transform 1s cubic-bezier(0, 0, 0.28, 0.95);
    }
    .signup-footer {
        border-top:solid 1px rgba(255,255,255,.3);
        margin:20px 0;
        padding-top:15px
    }
    .device-list {
        padding: 10px;
        margin: 0;
        list-style: none;
        font-size: 16px;
        user-select: none;
    }
    .ui-layout-content {
        padding: 0;
    }
    .device-item {
        cursor: pointer;
        font-size: 14px;
        padding: 0px 20px;
        margin-top: 10px;
    }
    .device-item:nth-child(1) {
        cursor: auto;
        font-size: 16px;
        padding: 0px;
        font-weight: 600;
        background-color: rgba(20,125,240, 0.1);
        color: #147DF0;
        padding: 5px 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    /*#minus-pattern {*/
    /*    display: inline-block;*/
    /*    border: 1px dashed #676a6c;*/
    /*    width: 22px;*/
    /*    height: 22px;*/
    /*    text-align: center;*/
    /*    line-height: 18px;*/
    /*    margin-right: 10px;*/
    /*    color: #676a6c;*/
    /*    cursor: pointer;*/
    /*}*/
    /*#minus-pattern:hover {*/
    /*    opacity: 0.6;*/
    /*}*/
    /*#plus-pattern {*/
    /*    display: inline-block;*/
    /*    border: 1px dashed #676a6c;*/
    /*    width: 22px;*/
    /*    height: 22px;*/
    /*    text-align: center;*/
    /*    line-height: 22px;*/
    /*    margin-right: 10px;*/
    /*    color: #676a6c;*/
    /*    cursor: pointer;*/
    /*}*/
    /*#plus-pattern:hover {*/
    /*    opacity: 0.6;*/
    /*}*/

    .position-container {
        height:35%;
        width:100%;
        box-shadow: 0px 0px 10px rgba(60, 141, 188, 0.2);
        border-radius: 10px;
        background-color: #fff;
        position: relative;
    }
    .position-direction:nth-child(1) {
    }
    .position-direction:nth-child(2) {
        position: absolute;
        top: 17.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: bold;
    }
    .position-direction:nth-child(3) {
        position: absolute;
        top: 50%;
        left: 95%;
        transform: translate(-50%, -50%);
        font-weight: bold;
    }
    .position-direction:nth-child(4) {
        position: absolute;
        top: 87.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: bold;
    }
    .position-direction:nth-child(5) {
        position: absolute;
        top: 50%;
        left: 5%;
        transform: translate(-50%, -50%);
        font-weight: bold;
    }
    .tips-list {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
        box-shadow: 0px 0px 10px rgba(60, 141, 188, 0.2);
        border-radius: 10px;
        font-size: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

    }
    .tips-list-item {
        width: 50%;
        padding: 1% 5%;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 100%;
    }
    .tips-item-text {
        color: #676E76;
        font-size: 1em;
        white-space: nowrap;
        width: 4em;
        text-align: left;
        display: inline-block;
    }

    .tips-item-num {
        color: #147DF0;
        font-size: 1.2em;
        font-weight: bold;
        white-space: nowrap;
        display: inline-block;
        width: calc(100% - 4rem);
    }
    .dw {
        color: #676E76;
        font-size: 1em;
        font-weight:normal;
    }

    .count-item {
        width: 100%;
        height: 33%;
        display: flex;
        background-color: #fff;
        font-size: 100%;
    }

    .time-query {
        margin-top: 30px;
        position: absolute;
        right: 25%;
    }

    .remark-title{
        text-align: center;
        width:100%;
        height:22%;
        font-size:14px;
        background-color: #fff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #3A3C3E;
    }

    .warn-count{
        text-align:center;
        height: 20%;
        width: 100%;
        font-size:12px;
        color: #FF5C46;
        margin-top: 5px;
    }

    .right-statistic{
        width: 22%;
        height:100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 240px;
    }

    .right-main{
        width: 70%;
        height:100%;
        user-select: none;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .right-count{
        height:26%;
        width:100%;
        border-radius: 10px;
    }

    .right-remark{
        height:35%;
        box-shadow: 0px 0px 10px rgba(60, 141, 188, 0.2);
        border-radius: 10px;
    }

    .warn-out-div{
        padding:5px;
        top:35%;
        width:100%;
        height:calc(46% - 2px);
        font-size:18px;
        margin-top: 2px;
        background-color: #fff; 
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .warn-one{
        top:20%;
        width:100%;
        display:flex;
    }
    .warn-two{

        display:flex;
    }

    .warn-three{
        text-align:center;
        height: 100%;
        width: 50%;
    }

    .warn-direction{
        text-align:center;
        color: #676E76;
        width: 50%;
        font-size: 14px;
    }
    
    .span-count{
        font-size:24px;
        color: #3A3C3E;
        font-weight: bold;
    }

    .span-warn-unit{
        font-size:16px;
        color: #3A3C3E;
    }

   .battery-one{
       display: flex;
       justify-content: center;
       align-items: center;
   }
   .battery-three{
       width: 20%;
   }
   .battery-two{
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 0px 10px;
       color: #11CE73;
       font-size: 24px;
   }

    .battery-count-num{
        color: #11CE73;
        font-size: 24px
    }

    .battery-count-des{
        color: #676E76;
        font-size: 12px
    }

    #direct{
        display: flex;  ;
        justify-content: space-around;
        flex-direction: column;
    }

    .dashed {
        height:80px;
        width:40px;
        /*border:1px dashed #000;*/
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

    }

    .arrow-img {
        height:60%;
       width: auto;
    }

    .tips-d {
        font-weight: bold;
        font-size: 18px;
    }

    .gray-bg {
        min-height: 600px;
        min-width: 800px;
        overflow: auto;
    }

</style>


<body class="gray-bg">
<div class="left-1" >
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 设备列表
            </div>

        </div>
        <div class="ui-layout-content" id="equipList"></div>
    </div>

</div>
<div class="right-2">

  <!--  <div class="time-query">
        开始时间: <input type="date"  id="startDay" />
        <input type="time"  id="startTime" value="00:00:01"/>
        结束时间: <input type="date"  id="endDay" />
        <input type="time"  id="endTime" value="00:00:01"/>
        <input type="button"  th:value="加载" onclick="submit()"/>
    </div>-->

    <div id="direct">

        <div class="dashed">
            <img  class="arrow-img" src="/img/up.png">
            <span class="tips-d" id="tips-p"></span>
        </div>
        <div class="dashed">
            <span class="tips-d" id="tips-n"></span>
            <img class="arrow-img" src="/img/down.png">
        </div>
    </div>

    <!-- 创建图表容器 -->
    <div id="main" class="right-main">
    </div>

    <div  class="right-statistic"    >

        <div id="remark" class="right-remark">

            <div id="title" class="remark-title"></div>

            <div class="batter-container" >

                <div class="battery-one">

                  <span class="battery-count-des">剩余电量
                  </span>

                </div>

                <div class="battery-two" id="bety">
                    12%
                </div>

                <div class="battery-three">
                    <div class="battery">
                        <div class="power" id="pw">
                        </div>
                    </div>
                </div>

            </div>

            <div class="warn-out-div">

                <div  class="warn-count"   >报警次数 (预警值:<span id="warnValue"></span>)</div>

                <div class="warn-one" >
                    <div class="warn-three"    ><span class="span-count"  id="warn1"></span><span class="span-warn-unit"> 次</span></div>
                    <div class="warn-three"  ><span class="span-count"  id="warn2"></span><span class="span-warn-unit"> 次</span></div>
                </div>

                <div class="warn-two" >
                      <div class="warn-direction" id="dp" >朝南</div>
                       <div class="warn-direction" id="dn">朝北</div>
                </div>

            </div>
        </div>

        <div  id="count"  class="right-count" >
            <ul class="tips-list" >

                <div  class="count-item"  style="border-top-left-radius: 10px;  border-top-right-radius: 10px;" >
                    <li  class="tips-list-item">
                        <span class="tips-item-text">最大值:</span>
                        <span class="tips-item-num">
                            <span id="max"></span>
                            <span class="dw">mm</span>
                        </span>
                    </li>

                    <li  class="tips-list-item">
                        <span class="tips-item-text">最小值:</span>
                        <span  class="tips-item-num" >
                            <span id="min"></span>
                            <span class="dw">mm</span>
                        </span>

                    </li>
                </div>

                <div class="count-item" style="margin-top: 2px ;margin-bottom: 2px"  >
                <li class="tips-list-item">
                    <span class="tips-item-text">平均值:</span>
                    <span class="tips-item-num" >
                             <span id="avg"></span>
                            <span class="dw">mm</span>
                    </span>

                </li>
                <li class="tips-list-item"  >
                    <span class="tips-item-text">方差:</span>
                    <span class="tips-item-num" >
                             <span id="vd"></span>
                         <span class="dw">mm</span>
                    </span>

                </li>
                </div>
                <div class="count-item"  style="border-bottom-left-radius: 10px;  border-bottom-right-radius: 10px;"  >
                <li class="tips-list-item">
                    <span class="tips-item-text">极差:</span>
                    <span class="tips-item-num" >
                           <span id="ed"></span>
                          <span class="dw">mm</span>
                    </span>

                </li>
                <li class="tips-list-item">
                    <span class="tips-item-text">标准差:</span>
                    <span class="tips-item-num" >
                         <span id="std"></span>
                         <span class="dw">mm</span>
                    </span>

                </li>
                </div>
            </ul>
        </div>

        <div class="position-container">
            <div id="position-chart" style="width: 100%; height: 100%"></div>
            <span class="position-direction">北</span>
            <span class="position-direction">东</span>
            <span class="position-direction">南</span>
            <span class="position-direction">西</span>
        </div>

    </div>


</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />

<script type="text/javascript">

    var id;
    var positive;
  /*  function  submit(e) {
        console.log("时间查询")
        var startDay =    $("#startDay").val();
        var startTime =    $("#startTime").val();
        var endDay =    $("#endDay").val();
        var endTime =    $("#endTime").val();


        if (startDay=='') {
            alert('请选择开始日期')
            return;
        }
        if (startTime=='') {
            alert('请选择开始时间')
            return;
        }
        if (endDay=='') {
            alert('请选择结束日期')
            return;
        }
        if (endTime=='') {
            alert('请选择结束日期')
            return;
        }

        var start = startDay + ' ' + startTime;
        var end = endDay + ' ' + endTime;

        var timestamp1 = Date.parse(new Date(start));
        var timestamp2 = Date.parse(new Date(end));

        if (timestamp1 > timestamp2) {
            alert('结束时间不能小于开始时间')
            return;
        }
        if (id == undefined) {
            alert('请先选择一个设备')
            return;
        }

        getLog(id,start,end);

        initPositionChart(positive);
        //预警
        getWarn(id,start,end,1);

        getCount(id,start,end);

    }*/

    function getCount(id,start,end) {

        $.ajax({
            cache : true,
            type : "GET",
            url : ctx + "main/wyInfo/count?id="+id +"&startTime="+start +"&endTime=" + end,
            data : {},
            async : false,
            error : function(request) {
                console.log("系统错误");
                $("#max").html(0);
                $("#min").html(0);
                $("#avg").html(0);
                $("#vd").html(0);
                $("#ed").html(0);
                $("#std").html(0);
            },
            success : function(data) {
                if (data!=null){
                    console.log("统计数据max" +data.max )
                    console.log("统计数据min" +data.min)
                    console.log("统计数据avg" +data.avg)
                    console.log("统计数据vd" +data.vd)
                    console.log("统计数据ed" +data.ed)
                    console.log("统计数据std" +data.std)
                    $("#max").html(data.max === null ? 0 : data.max);
                    $("#min").html(data.min === null ? 0 : data.min);
                    $("#avg").html(data.avg === null ? 0 : data.avg);
                    $("#vd").html(data.vd === null ? 0 : data.vd);
                    $("#ed").html(data.ed === null ? 0 : data.ed);
                    $("#std").html(data.std === null ? 0 : data.std);
                }
            }
        });
    }

    const g2Data = [];
    const chart ={};
    let warningValue = 0;

    var title = '';
    $(function() {
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "main/wyInfo/wylist",
            data : {
            },
            async : false,
            error : function(request) {
                console.log("系统错误");
            },
            success : function(data) {
                if (data!=null){
                    var innerHtml="";
                    console.log('wylist data', data)
                    for (var i=0;i<data.length;i++){
                        innerHtml=innerHtml+"<ul class='device-list'>"+ "<li class='device-item'>" + data[i].name + "</li>";
                        if (data[i].list!=null && data[i].list.length>0){
                            for (var j=0;j<data[i].list.length;j++){
                                innerHtml = innerHtml + "<li class='device-item' onclick='changeData(this)' id='" + data[i].list[j].id + "' name='" + data[i].list[j].addr + "' value='" + data[i].list[j].deviceCode + "' positive='" + data[i].list[j].positive +"' >" + data[i].list[j].addr + "</li>";
                                //第一个设备的日志默认显示
                                 if (i==0&&j==0){
                                     title =  data[i].list[j].addr;
                                     id = data[i].list[j].id;
                                     positive = data[i].list[j].positive;
                                     this.showId={
                                         "id":data[i].list[j].id,
                                         "addr":data[i].list[j].addr,
                                         "code":data[i].list[j].deviceCode
                                     }

                                     getLog(data[i].list[j].id,"","");
                                     //标题
                                     // document.getElementById("title").innerHTML="<p>"+data[i].list[j].addr+"<br>("+data[i].list[j].deviceCode+")</p>";
                                     document.getElementById("title").innerHTML="<p style='margin: 0'>"+data[i].list[j].deviceCode+"</p>";
                                     //预警
                                     getWarn(data[i].list[j].id,"","",1, true);
                                     initPositionChart(data[i].list[j].positive);
                                     getCount(data[i].list[j].id,"","")

                                 }
                            }
                        }
                        innerHtml=innerHtml+"</ul>"
                    }
                    document.getElementById("equipList").innerHTML=innerHtml;
                    // 默认第一个子菜单字体为蓝色
                    changeData(document.getElementsByClassName("device-item")[1]);
                }
            }
        });

    })



    function changeData(obj){
        id = obj.getAttribute("id");
        var elementArray = document.getElementsByClassName("device-item");
        for (let i = 0; i < elementArray.length; i++) {
            var  mid =  elementArray[i].getAttribute("id");
            if (mid == id) {
                elementArray[i].style.color = "#147DF0";
            } else {
                elementArray[i].style.color = "";
            }
        }
         var addr=obj.getAttribute("name");
         var code=obj.getAttribute("value");
         positive = obj.getAttribute("positive");
         title = addr;
         this.showId={
            "id":id,
            "addr":addr,
            "code":code
         }

        getLog(id,"","");
        //  initChart();
        initPositionChart(positive);
        //标题
        // document.getElementById("title").innerHTML="<p>"+addr+"<br>("+code+")</p>";
        document.getElementById("title").innerHTML="<p style='margin: 0'>"+code+"</p>";
        //预警
        getWarn(id,"","",1, true);

        getCount(id,"","")
    }
    let myChart = null;
    window.onresize = () => {
        if (myChart) {
            myChart.resize();
        }
        if (positionChart) {
            positionChart.resize()
        }
    }
    function initHistoryChart(val) {
        if (myChart) {
            console.log('dispose')
            myChart.dispose();
        }
        myChart = echarts.init(document.getElementById('main'));
        var date = [];
        var data = [];
        if (g2Data.length == 0) {

        } else {
            for (var i = 0; i < g2Data.length; i++) {
                date.push(g2Data[i].year);
                data.push(g2Data[i].sales);
            }
        }
        console.log("date======"+date)
        console.log("data======"+data)
        console.log("g2Data length======"+g2Data.length)
        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            grid: {
                bottom: 100
            },
            title: {
                left: '10%',
                text: title + '历史数据曲线',
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                type: 'value',
                // boundaryGap: [0, '100%']
                axisLabel: {
                    formatter: '{value} %'
                }
            },
            visualMap: [
                {  orient: 'horizontal',
                    bottom: 15,
                    right: 'center',
                    pieces: [
                        {
                            // gt: -10000,
                            lte: -val,
                            color: '#DD4444'
                        }
                        ,{
                        gt: -val,
                        lte: val,
                        color: '#11CE73'
                    },
                        {
                            gt: val,
                            color: '#DD4444'
                        }]
                }
            ],
            dataZoom: [{
                start: 0,
                end: 100,
                startValue: date[0],
                endValue: date[date.length - 1],
                bottom: 40
            }, {
                type: 'inside'
            }],
            series: [
                {
                    name: '历史数据',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                    showSymbol:false,
                    showAllSymbol: false,
                    data: data,
                markLine: {
                silent: true,
                data: []
        }
                }
            ]
        };
        optionEmpty = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: '10%',
                text: title + '历史数据曲线',
            },
            grid: {
                bottom: 100
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            visualMap: [
                {  orient: 'horizontal',
                    bottom: 15,
                    right: 'center',
                    pieces: [
                        {
                            // gt: -10000,
                            lte: -val,
                            color: '#ff9933'
                        }
                        ,{
                            gt: -val,
                            lte: val,
                            color: '#11CE73'
                        },
                        {
                            gt: val,
                            color: '#DD4444'
                        }]
                }
            ],
            dataZoom: [{
                startValue: [],
                bottom: 40
            }, {
                type: 'inside'
            }],
            series: [
                {
                    name: '历史数据',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                    showSymbol:false,
                    showAllSymbol: false,
                    data: [],
                    markLine: {
                        silent: true,
                        data: []
                    }
                }
            ]
        };
        if (g2Data.length == 0) {
            myChart.setOption(optionEmpty, true);
        } else {
            myChart.setOption(option, true);
        }



        myChart.on('datazoom',function(params,param){
            //获得图表数据数组下标
            var startValue = myChart.getModel().option.dataZoom[0].startValue;
            var endValue = myChart.getModel().option.dataZoom[0].endValue;

            console.log("startValue======="+startValue)
            console.log("endValue======="+endValue)

            console.log("startTime======="+ date[startValue]  )
            console.log("endTime======="+ date[endValue]  )

            getCount(id,date[startValue],date[endValue]);
            getWarn(id,date[startValue],date[endValue],0, false);
        });


    }


    function getLog(id,start,end) {
        console.log("id==" + id);
        console.log("start==" + start);
        console.log("end==" + end);
        $.ajax({
            cache : true,
            type : "GET",
            url : ctx + "main/wyInfo/logList?id="+id  +"&startTime="+start +"&endTime=" + end,
            data : {},
            async : false,
            error : function(request) {
                console.log("系统错误");
            },
            success : function(data) {
                while(g2Data.length > 0) {
                    g2Data.pop();
                }
                if (data!=null){
                    for (var i=0;i<data.length;i++){
                        var lg = {
                            year: data[i].operateTime,
                            sales: data[i].offsetMm,
                        }
                        g2Data[data.length-1-i]=lg;
                        if (i==0){
                            //电量
                            var bt=(data[i].batteryVal/10000).toFixed(2);
                            document.getElementById("bety").innerHTML=bt*100 +"%";
                            document.getElementById("pw").style.transform="scaleX("+bt+")";
                            // document.getElementById("pw").style.transition=`transform 1s cubic-bezier(0, 0, 0.28, 0.95)`;
                        }
                    }
                }else {

                    document.getElementById("bety").innerHTML = 100 + "%";
                    document.getElementById("pw").style.transform = "scaleX(" + 1 + ")";
                    // document.getElementById("pw").style.transition = `transform 1s cubic-bezier(0, 0, 0.28, 0.95)`;
                }
            }
        });
    }

    function formatDate(rawDate) {
        const date = new Date(rawDate);
        const year = date.getFullYear().toString().substring(0, 2);
        const month = date.getMonth() + 1;
        const day = date.getDate();
        return `${year}.${ month < 10 ? '0' + month : month }.${ day < 10 ? '0' + day : day }`
    }

  /*  function initChart() {
        let maxNum = 0;
        let minNum = 0;
        const myChart = echarts.init(document.getElementById('main'));
        console.log('g2Data', g2Data)
        let yearsArray = [];
        let salesArray = [];
        for (const item of g2Data) {
            if (item.year && item.sales) { // 过滤出正确的数据
                yearsArray.push(formatDate(item.year))
                salesArray.push(item.sales)
                if (item.sales > maxNum) {
                    maxNum = item.sales
                }
                if (item.sales < minNum) {
                    minNum = item.sales
                }
            }
        }
        console.log('yearsArray', yearsArray)
        console.log('salesArray', salesArray)
        maxNum = Math.abs(maxNum) >= Math.abs(minNum) ?  Math.abs(maxNum) : Math.abs(minNum)
        const option = {
            title: {
                text: '单个支座位移量(周)'
            },
            xAxis: {
                type: 'category',
                data: yearsArray
            },
            series: [{
                name: '正负位移（mm）',
                data: salesArray,
                type: 'line',
                label: {
                    show: true,
                    color: '#000'
                },
                symbolSize: 1,
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0, color: '#67C23A' // 0% 处的颜色   67C23A
                            },
                            {
                                offset: 0.5, color: '#F56C6C' // 50% 处的颜色
                            },
                            {
                                offset: 1, color: '#409EFF' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                }
            }],
            // color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            color: [{
                type: 'linear',
                colorStops: [
                    {
                        offset: 0, color: '#67C23A' // 0% 处的颜色
                    },
                    {
                        offset: 0.5, color: '#F56C6C' // 50% 处的颜色
                    },
                    {
                        offset: 1, color: '#409EFF' // 100% 处的颜色
                    }
                ],
                global: false // 缺省为 false
            }],
            legend: {
                data: ['正负位移（mm）'],
                bottom: '0%'
            },
            yAxis: [
                {
                    type: 'value',
                    splitLine:{
                        show: true,
                        lineStyle: {
                            type:'dashed'
                        }
                    },
                    axisLine:{
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    min: -Math.abs(maxNum),
                    max: Math.abs(maxNum),
                    minInterval: Math.abs(maxNum) / 5,
                    interval: Math.abs(maxNum) / 5,
                    splitNumber: 10,
                    axisLabel: {
                        formatter: function (value, index) {
                            let texts = [];
                            if (value == Math.abs(maxNum) / 5) {
                                texts.push('向前')
                            } else if (value == -(Math.abs(maxNum) / 5)) {
                                texts.push('向后')
                            } else {
                                texts.push('')
                            }
                            return texts
                        },
                        fontWeight: 'bold',
                        fontSize: 20
                    }
                }
            ]
        };
        myChart.setOption(option);
    }*/

    function restorePositive(positive) {
        if (positive === '1') {
            return Array.from([10, 3])
        } else if (positive === '2') {
            return Array.from([3, 10])
        } else if (positive === '3') {
            return Array.from([-3, 10])
        } else if (positive === '4') {
            return Array.from([-10, 3])
        } else if (positive === '5') {
            return Array.from([-10, -3])
        } else if (positive === '6') {
            return Array.from([-3, -10])
        } else if (positive === '7') {
            return Array.from([3, -10])
        } else if (positive === '8') {
            return Array.from([10, -3])
        } else {
            return Array.from([0, 0])
        }
    }

    let positionChart = null;

    function initPositionChart(positive) {
        console.log('positive====', positive)
        const direction = restorePositive(positive)
        console.log('direction====', direction)
        positionChart = echarts.init(document.getElementById('position-chart'));
        console.log('positionChart', positionChart)
        console.log('g2Data[g2Data.length - 1]=zzzzzzzzzzzzzzzzzzzzzzzzzz', g2Data)
        console.log('g2Data[g2Data.length - 1]=zzzzzzzzzxxxxxxxxxxxxxxxxxxxxxxxxxxx', g2Data[g2Data.length - 1])
        if (g2Data.length == 0) {
            console.log('g2Data[g2Data.length - 1]=zzzzzzzzzxxxxxxxxxxxxxxxxxxxxxxxxxxx')
            document.getElementById("bety").innerHTML= 0 +"%";
            document.getElementById("warn1").innerHTML= 0 ;
            document.getElementById("warn2").innerHTML= 0 ;
            $.modal.alert("没有数据", modal_status.SUCCESS);
            document.getElementById("pw").style.transform="scaleX("+0+")";

            const optionEmpty = {
                title: {
                    text: '最近一次位移方向',
                    left: '25%',
                    top: '5%',
                    textStyle: {
                        fontSize: 14
                    }
                },
                grid: {
                    top: '20%',
                    bottom: '20%'
                },
                xAxis: {
                    offset: -document.getElementsByClassName('position-container')[0].offsetHeight * 0.6 / 2,
                    min: 0,
                    max: 10,
                    // axisTick: {
                    //     show: false
                    // },
                    axisLabel: {
                        formatter: function (value, index) {
                            let texts = [];
                            return texts
                        },
                    }
                },
                yAxis: {
                    offset: -document.getElementsByClassName('position-container')[0].offsetWidth * 0.8 / 2,
                    min: 0,
                    max: 10,
                    // axisTick: {
                    //     show: false
                    // },
                    axisLabel: {
                        formatter: function (value, index) {
                            let texts = [];
                            return texts
                        },
                    }
                },
                series: [
                    {
                        data: Array.from([Array.from([0, 0]), Array.from[0, 0]]),
                        type: 'line'
                    }
                ],
                // tooltip: {
                //     trigger: 'axis',
                //     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                //         type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                //     }
                // },
                color: [{
                    type: 'linear',
                    colorStops: [
                        {
                            offset: 0, color: '#F56C6C' // 0% 处的颜色
                        },
                        {
                            offset: 0.5, color: '#67C23A' // 50% 处的颜色
                        },
                        {
                            offset: 1, color: '#409EFF' // 100% 处的颜色
                        }
                    ],
                    global: false // 缺省为 false
                }],
            };

            positionChart.setOption(optionEmpty);
            return;
        }
        const option = {
            title: {
                text: '最近一次位移方向',
                left: '25%',
                top: '5%',
                textStyle: {
                    fontSize: 14
                }
            },
            grid: {
                top: '20%',
                bottom: '20%'
            },
            xAxis: {
                // offset: -document.getElementsByClassName('position-container')[0].offsetHeight * 0.6 / 2,
                min: -10,
                max: 10,
                // axisTick: {
                //     show: false
                // },
                axisLabel: {
                    formatter: function (value, index) {
                        let texts = [];
                        return texts
                    },
                }
            },
            yAxis: {
                // offset: -document.getElementsByClassName('position-container')[0].offsetWidth * 0.8 / 2,
                min: -10,
                max: 10,
                // axisTick: {
                //     show: false
                // },
                axisLabel: {
                    formatter: function (value, index) {
                        let texts = [];
                        return texts
                    },
                }
            },
            series: [
                {
                    data: Array.from([Array.from([0, 0]), direction]),
                    type: 'line'
                }
            ],
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            //         type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            //     }
            // },
            color: [{
                type: 'linear',
                colorStops: [
                    {
                        offset: 0, color: '#F56C6C' // 0% 处的颜色
                    },
                    {
                        offset: 0.5, color: '#67C23A' // 50% 处的颜色
                    },
                    {
                        offset: 1, color: '#409EFF' // 100% 处的颜色
                    }
                ],
                global: false // 缺省为 false
            }],
        };
            positionChart.setOption(option);
    }


    function getWarn(id,start,end,num, refresh) {
        $.ajax({
            cache : true,
            type : "GET",
            url : ctx + "main/wyInfo/warnCot?id="+id +"&startTime="+start +"&endTime=" + end,
            data : {},
            async : false,
            error : function(request) {
                console.log("系统错误");
                document.getElementById("warn1").innerHTML=0;
                document.getElementById("warn2").innerHTML=0;
                warningValue = 0;
                document.getElementById("warnValue").innerHTML=0;
                document.getElementById("dp").innerHTML='--';
                document.getElementById("dn").innerHTML='--';
                document.getElementById("tips-p").innerHTML='--';
                document.getElementById("tips-n").innerHTML='--';
                if (refresh === false) {
                    console.log('refresh=============2333444')
                    return
                }
                initHistoryChart(warningValue);
            },
            success : function(data) {
                if (data!=null){
                    document.getElementById("warn1").innerHTML=data.val1 === null ? 0 : data.val1;
                    document.getElementById("warn2").innerHTML=data.val2 === null ? 0 : data.val2;
                    warningValue = data.val === null ? 0 : data.val;
                    document.getElementById("warnValue").innerHTML=data.val === null ? 0 : data.val;
                    document.getElementById("dp").innerHTML=data.name1 === null ? '--' : data.name1;
                    document.getElementById("dn").innerHTML=data.name2 === null ? '--' : data.name2;
                    document.getElementById("tips-p").innerHTML=data.name1 === null ? '--' : data.name1;
                    document.getElementById("tips-n").innerHTML=data.name2 === null ? '--' : data.name2;
                    if (refresh === false) {
                        return
                    }
                    if (num == 1) {
                        console.log('refresh=============2333444')
                        initHistoryChart(warningValue);
                    }

                }
            }
        });
    }
</script>

</body>
</html>
